<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>猩</title>
		<style>
			div{
				width: 200px;
				height: 200px;
				background-color: #ff0000;
				margin: 300px auto;
				transform: rotate(45deg);
				
				/* 透明度属性：属性值0~1(范围值)不可更改
				  0为透明效果消失，1全显
				 */
				opacity: .5;
				
				/* 滤镜属性：光晕(下阴影) */
				/* filter: drop-shadow(x值 y值 模糊范围 颜色);
				 */
				filter: drop-shadow(0 0 100px #0055ff);
				
				/* 猩猩，启动！！！！！
				  动画属性：关键帧名称 过渡时间 过渡方式 循环*/
				animation: heart .8s linear infinite;
			}
			/* 伪类选择器：给元素添加上效果 
			  语法：div:hover{}当鼠标悬停在div上实现效果
			 选择器:after在元素之后添加文本 通常与content:""
			 选择器:before在元素之前添加文本 通常与content:""
			  */
			
			div:before{
				
				content:"" ;
				/*  
				display: block;行转块 
				display: inline;块转行
				display: none;元素删除
				 */
				display: block;
			    width: 200px;
			    height: 200px;
				background-color: #ff0000;
				border-radius: 50%;
				position:relative;
				left:-100px;
				
			}
			
			div:after{
				content:"  ";
				display: block;
				width: 200px;
				height: 200px;
				background-color: #ff0000;
				border-radius: 50%;
				position:relative;
				top:-300px;
			}
			
			/* ------动画-------- */
			/* 创建关键帧--类似手翻书 */
			@keyframes heart{
			 /* 三个画面：等比例出现，防止跳帧*/
			 0%{/* 转换属性：缩放     1为等比例*/
				 transform: rotate(45deg) scale(1);
			 }
			 30%{
				  transform:rotate(45deg) scale(.7);
			 }
			 100{
				  transform:rotate(45deg) scale(1.5);
			 }
				
			}
			
			
		</style>
	</head>
	
	<body>
		<!-- 单个div元素 -->
		<div></div>
		<!-- (html内容)：
		 元素的分类：元素特点划分如下：
		           1.块元素：可以设置高宽、独占一行
					典型块元素：div
					
		            2.行元素：不可以设置高宽、可以在一行内显示，文本内容属于行元素
					典型行元素：span
					
					3.行内块元素：可以设置高宽，在同一行内显示
					典型行内块元素：img(图片设置高宽，编写文字)
		 
		 
		 -->
		 <audio src="CSS/renxi.mp3" autoplay></audio>
	</body>
</html>